<!--
 * @Author: cqg
 * @Date: 2021-06-26 09:05:04
 * @LastEditTime: 2021-06-26 17:55:33
 * @Description: file content
 * @LastEditors: cqg
-->

<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog custom-class="small-padding-dialog" :close-on-click-modal="false" :title="type=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="70%" @close="handleClosed">
      <el-form :model="formData" ref="dialogForm" class="form-wrap" style="padding-top:0px;" :rules="rules">
        <el-form-item label="隔离点名称" prop="hotelBaseInfoId">
          <el-select clearable v-model="formData.hotelBaseInfoId" placeholder="请选择" :disabled="type=='edit'" filterable>
            <el-option v-for="item in hotelList" :key="item.value" :label="item.hotelName" :value="item.hotelBaseInfoId" />
          </el-select>
        </el-form-item>
        <el-form-item label="房间所属楼层" prop="roomFloor">
          <el-input v-model="formData.roomFloor" placeholder="请输入楼层 示例XX栋XX层或XX层" />
        </el-form-item>
        <el-form-item label="房间号" prop="roomNum">
          <el-input v-model="formData.roomNum" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="使用类型" prop="useType">
          <el-select clearable v-model="formData.useType" placeholder="请选择" :disabled="type === 'preview'" filterable>
            <el-option v-for="item in getDict('use_type')" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="房间状态" prop="roomState">
          <el-select clearable v-model="formData.roomState" placeholder="请选择" :disabled="type === 'preview'" filterable>
            <el-option v-for="item in getDict('room_state')" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="使用开始时间" prop="useStartTime">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.useStartTime" type="datetime" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="使用终止时间" prop="useEndTime">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.useEndTime" type="datetime" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="备注" class="full" prop="remark">
          <el-input v-model="formData.remark" type="textarea" maxlength="10" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getObj, addOrEdit, getListHotel } from "@/views/yq-hotel/api/room.js";
export default {
  name: "hotelDialog",
  inject: ['initList'],
  data () {
    return {
      //弹窗类型，默认新增
      type: "add",
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {
        hotelBaseInfoId: '', roomFloor: '', roomNum: '', useType: '', roomState: '', useStartTime: '', useEndTime: '', remark: '',
      },
      hotelList: [],
      // 校验
      rules: {
        hotelBaseInfoId: [{ required: true, message: "隔离点名称不能为空", trigger: "blur" }],
        roomNum: [{ required: true, message: "房间号不能为空", trigger: "blur" }],
        roomFloor: [{ required: true, message: "房间所属楼层不能为空", trigger: "blur" }],
        useType: [{ required: true, message: "使用类型不能为空", trigger: "blur" }],
        roomState: [{ required: true, message: "房间状态不能为空", trigger: "blur" }],
        useStartTime: [{ required: true, message: "使用开始时间不能为空", trigger: "blur" }],
        useEndTime: [{ required: true, message: "使用终止时间不能为空", trigger: "blur" }],
      }
    }
  },
  methods: {
    //开启弹窗
    async show ({ type, data = {} }) {
      let response = await getListHotel(null)
      this.hotelList = response.data.data
      if (type == 'edit') {
        let rps = await getObj(data.houseId)
        this.formData = { ...this.formData, ...rps.data.data }
      }
      this.type = type;
      this.dialogVisible = true;
    },
    // 提交新增
    async save () {
      const valid = await this.$refs.dialogForm.validate();
      if (!valid) return;
      
	  if (this.formData.useStartTime >= this.formData.useEndTime) {
	  		this.$message.error(`使用开始时间不能晚于使用终止时间！`);
	  } else {
		  await addOrEdit(this.formData, this.type)  
	      this.$message.success(`提交成功!`);
	      this.initList({ keyword: '' })
	      this.dialogVisible = false;
	     }
	  },
    // 弹窗关闭还原
    handleClosed () {
      let _formData = JSON.parse(JSON.stringify(this.formData))
      for (let i in _formData) {
        _formData[i] = ''
      }
      this.formData = _formData
      this.$refs.dialogForm.resetFields()
    }
  },
};
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
.stagnationPoint {
  @include formWrap(4);
}
</style>
